<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box {
            display: inline-block;
            width: 300px;
            margin: 25px;
        }

        .box h2 {
            background: #3185bf;
            color: white;
            padding: 10px 20px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .box li {
            list-style: none;
            padding: 15px;
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
            transition: transform 0.5s;
        }

        .box li:hover {
            transform: scale(1.1);
            background: #03a9f4;
            color: white;
        }

    </style>
</head>
<body>
<div class="box">
    <h2>List Items</h2>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
        <li>List item 6</li>
    </ul>
</div>
<br> <br>
<hr>
1.搭建基本HTML结构。包括，容器，一级菜单名称，二级列表 <br>
2.创建基本样式。容器：宽度，display等基本样式；标题：取消margin，设置padding；列表：取消margin，取消项的默认padding缩进；
列表项：取消样式，设置padding <br>
3.美化样式。标题：背景色，字体颜色，上边框弧度；列表项：添加阴影 <br>
4.列表项鼠标悬浮样式。扩大1.1倍，且调转背景色/字体色 <br>
5.列表项悬浮动画样式。设置移动0.5s的过渡动画


</body>
</html>